<template>
  <el-select v-model="value" v-bind="$attrs">
    <template v-for="(_, slotName) in $slots" v-slot:[slotName]>
      <slot :name="slotName"></slot>
    </template>
    <el-option v-for="item in props.options" :key="item.value" :label="item.label" :value="item.value"></el-option>
    <el-option v-if="(props.modelValue || props.modelValue === 0) && !props.options.some(item => item.value === props.modelValue)" label="选项已禁用或不存在" :value="props.modelValue ?? String(props.modelValue)" disabled />
  </el-select>
</template>
<script setup lang="ts">
const props = withDefaults(defineProps<{
  options: DictDataOption[];
  modelValue: string | number | boolean | object | undefined | Array<any>;
}>(), {
  options: () => [],
  modelValue: undefined
});
const emit = defineEmits(['update:modelValue']);
const value = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    emit('update:modelValue', val);
  }
});
</script>
<style scoped lang="scss"></style>
